<template>
	<view>
		<view class="cu-bar bg-white">
			<view class="action">
				<navigator open-type="navigateBack">
					<text class="cuIcon-back text-gray"></text> 返回
				</navigator>
			</view>
			<view class="content text-bold">
				积分商城
			</view>
		</view>
		<view class="bg-img bg-mask flex align-center"
			style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
			<view class="padding-xl text-white">
				<view class="padding-xs text-xxl text-bold">
					积分商城
				</view>
				<view class="padding-xs text-lg">
					如何获取积分 <text class="cuIcon-magic" @tap="ShowExchange" data-target="Getpoints"></text>
				</view>
			</view>
		</view>
		<view class="padding-sm radius shadow bg-white flex shadow-blur">
			<view class="flex-sub padding-sm margin-xs radius text-center" @tap="ShowExchange" data-target="Exchange">
				兑换记录</view>
			<view class="flex-sub padding-sm margin-xs radius text-center" @tap="ShowExchange" data-target="integral">
				积分明细</view>
		</view>
		<view class="padding-sm">
			<view class="flex flex-wrap justify-around">
				<button class="margin-sm basis-sm shadow cu-btn"
					:class="['bg-' + item.color,toggleDelay?'animation-slide-bottom':'']"
					:style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in list"
					:key="index">0.{{index+1}}s</button>
			</view>
		</view>
		<!-- 可兑换的券 -->
		<view class="cu-list menu-avatar">
			<view class="cu-item shadow margin-top-sm" v-for="(item,index) in 4" :key="index"
				:class="[toggleDelay?'animation-slide-bottom':'']" :style="[{animationDelay: (index + 1)*0.3 + 's'}]">
				<view class="cu-avatar round lg"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
				</view>
				<view class="content">
					<view class="text-grey">战斧牛排{{item}}券</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							<text>有效期：10天</text>
							<text class="cuIcon-locationfill text-orange margin-right-xs"></text>
							<text>剩余：999</text>
						</view>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">1008积分</view>
					<view class="cu-tag round sm cuIcon-roundadd" @tap="addCoupon" data-target="Coupon"></view>
				</view>
			</view>
			<!-- 获取积分说明 -->
			<view class="cu-modal" :class="ShowExchanges=='Getpoints'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">积分说明</view>
						<view class="action" @tap="hideCoupon">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-sm text-left">
						<view class="padding-sm bg-white solid-bottom" v-for="item in 4" :key="item">
							<view class=" padding-sm">
								<text>黄金</text>
							</view>
							<view class="padding-sm text-sm"><text class="margin-right">开卡送</text>开卡可获得<text class="text-red">10</text>积分</view>
							<view class="padding-sm text-sm"><text class="margin-right">消费送</text>消费1元得<text class="text-red">1</text>积分</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 兑换优惠券 -->
			<view class="cu-modal" :class="addCoupons=='Coupon'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">兑换详情</view>
						<view class="action" @tap="hideCoupon">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<view class="cu-list menu-avatar">
							<view class="cu-item shadow margin-top-sm">
								<view class="cu-avatar round lg"
									style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
								</view>
								<view class="content">
									<view class="text-grey">战斧牛排</view>
									<view class="text-gray text-sm flex">
										<view class="text-cut">
											<text>剩余：999</text>
											<text class="text-red margin-left">积分：999</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="padding bg-white">
							<view class="text-left padding">
								<view class="">兑换须知</view>
								<view class="text-sm margin-top-sm">
									<view class="">1.本商品每人每天不限量兑换</view>
									<view class="">2.请在营业时间(周一到周日10:00到22: 00) 到设计餐厅进行兑换</view>
									<view class="">3.兑换时请向店员出示二维码</view>
									<view class="">4.本商品一经兑换不可退换</view>
								</view>
								<view class="margin-top-sm">使用规则:</view>
								<view class="text-sm margin-top-sm">
									<view class="">券有效期:领取后15天内有效</view>
									<view class="">适用场景:堂食，外带</view>
									<view class="">可用时段:不限制</view>
									<view class="">最低消费:0元</view>
									<view class="">使用说明:666积分即可兑换-儿童牛排，最终解释权归商家所有</view>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" v-if="integralNumber < 666" @tap="hideCoupon">积分不足</button>
							<button class="cu-btn bg-green margin-left" v-else @tap="addCouponG">兑换</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 兑换记录 -->
			<view class="cu-modal" :class="ShowExchanges=='Exchange'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">兑换记录</view>
						<view class="action" @tap="hideCoupon">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-sm" style="height: 500rpx">
						<scroll-view scroll-y style="height: 500rpx;">
							<view class="cu-list menu card-menu margin-top-sm shadow-lg">
								<view class="cu-item arrow" v-for="(item,index) in 10" :key="index">
									<view class="content">
										<text class="cuIcon-github text-grey"></text>
										<text class="text-grey">兑换记录内容{{index +1}}</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn bg-green margin-left" @tap="hideCoupon">确定</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 积分明细 -->
			<view class="cu-modal" :class="ShowExchanges=='integral'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">积分明细</view>
						<view class="action" @tap="hideCoupon">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-sm" style="height: 500rpx">
						<scroll-view scroll-y style="height: 500rpx;">
							<view class="cu-list menu card-menu margin-top-sm shadow-lg">
								<view class="cu-item arrow" v-for="(item,index) in 10" :key="index">
									<view class="content">
										<text class="cuIcon-github text-grey"></text>
										<text class="text-grey">今日获得的积分{{index +1}}</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn bg-green margin-left" @tap="hideCoupon">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animation: '',
				toggleDelay: false,
				addCoupons: null,
				ShowExchanges: null,
				integralNumber:666
			}
		},
		onLoad() {
			this.ToggleDelay()
		},
		methods: {
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					this.toggleDelay = false
				}, 1000)
			},
			// 添加优惠券
			addCoupon(e) {
				console.log("click")
				this.addCoupons = e.currentTarget.dataset.target
			},
			// 查看兑换记录
			ShowExchange(e) {
				this.ShowExchanges = e.currentTarget.dataset.target
			},
			// 添加成功
			addCouponG(e) {
				console.log("成功or失败")
			},
			// 隐藏提示
			hideCoupon() {
				this.addCoupons = null
				this.ShowExchanges = null
			}
		}
	}
</script>

<style lang="less">

</style>
